<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
<template>
    <div id="header">
        <div class="user">
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.4213d5c873adae72c8f39fd8c9cbbb39?rik=MeaSnb%2bU0gSoXQ&riu=http%3a%2f%2fimg.xzappw.cn%2f20201010%2f20201010160224624.jpg&ehk=y10tnUjfoo6kZoabEPj6BvkkfuV7DqJm3HerzNwSEgE%3d&risl=&pid=ImgRaw&r=0"
                alt="">
            <span>1111</span>
        </div>
        <i class="el-icon-switch-button" @click="goOut"></i>
    </div>
</template>
<script>
export default {
  methods: {
    goOut() {
      //  退出提示框
      this.$confirm('您确定要退出吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已退出!',
        });
        this.$router.push('/login');
        this.$store.commit('user/removeToken');
      });
    },
  },
};
</script>
<style scoped>
#header {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 80px;
    background-color: #fff;
    box-shadow: 0 0 5px gray;
}

.user {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: #fafbfd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding-right: 20px;
}

.user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 20px;
}

i {
    font-size: 28px;
    color: #aeafae;
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
}
</style>
